<template>
	<view>
		<view class="top" :style="`padding-top:` + $store.state.StatusBar.statusBar + `px`">
			<view class="top-icon" @click="to()">
				<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>
			</view>
			<view class="top-title c-fff">写真/视频</view>
		</view>
		<view class="body c-fff">
			
			<view class="list">
				<view class="item" v-for="i of 9">
					<image v-if="list[i-1]" @longpress="deleteImg(list[i-1].img,i)" :src="list[i-1].img" mode="aspectFill" style="width:100%; height:100%;"></image>
					<image v-else @click="uploadImg" src="./img/icon_camera.png" mode="aspectFill" style="width:100rpx; height:100rpx;margin-top:100rpx;"></image>
				</view>
			</view>
			
			<view style="position:absolute; bottom:60rpx; text-align: center; color:#fff; width:100%;">
				<p>
					1.勿上传涉黄或性暗示等低俗照片
				</p>
				<p>
					2.请在明亮的环境下拍照以保证清晰
				</p>
			</view>
		</view>
	</view>
</template>

<script>
import {
	to
} from '@/utils/index.js';
import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'
export default {
	data() {
		return {
			info: {},
			list: []
		}
	},
	onLoad() {
		this.getInfo();
	},
	methods: {
		to,
		async getInfo(){
			let res = await this.$c.post('/app/usermessage/getMessage')
			if (res.code != 0) {
				uni.navigateTo({
					url: '/im/login/login'
				});
			}
			this.info = res.data
			if(this.info.xingxiang){
				let xingxiang = this.info.xingxiang.split(',');
				for(let item of xingxiang){
					if(item != ''){
						this.list.push({
							img: item
						})
					}
				}
			}
			console.log(this.list)
		},
		uploadImg() {
			uni.chooseImage({
				count: 6,
				success: async (file) => {
					const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'image/')
				  // const {success,data} = await ossUpload(this.oss,file.tempFilePaths[0], file.tempFiles[0].path, 'image/')
				  if(success) {
					this.list.push({
						img: data
					})
					// encodeURIComponent(data)
					// {urlImage:data}
					await this.$c.post("/app/geren/upxingxiang?urlImage="+encodeURIComponent(data)+",")
					// this.headImage = data
				  } else {
					uni.showToast({icon:'none', title: data})
				  }
				}
			})
		},
		deleteImg(src,i){
			uni.showModal({
				title:"提示",
				content:"确认要删除吗？",
				success:async (res)=> {
					if(res.confirm){
						this.list.splice(i-1,1);
						await this.$c.post("/app/geren/delxxpic?pic="+encodeURIComponent(src));
					}
					// console.log(res)
				}
			})
		}
	},
}
</script>

<style lang="scss" scoped>
.top {
	position: fixed;
	top: 0rpx;
	width: 100%;
	/* background-color: #e3ecfb; */
	z-index: 999;
	text-align: center;
	vertical-align: middle;
	padding: 10rpx;
}

.top-icon {
	position: absolute;
	left: 30rpx;
	z-index: 99;
	width: 30rpx;
	height: 30rpx;
}

.top-title {
	line-height: 50rpx;
	display: block;
	height: 50rpx;
	z-index: 99;
}

.body {
	padding-top: 100rpx;
	.list{
		display:flex;
		flex-wrap:wrap;
		align-items: center;
		.item{
			width:30%;
			margin-left:2.5%;
			margin-top:30rpx;
			border-radius: 20rpx;
			overflow: hidden;
			height:300rpx;
			background-color: #333;
			text-align: center;
		}
	}
}



</style>